<template>
	<view>
		<!-- <view class="courseNaver">
			<view class="left">
				<image src="../../static/images/vidicon.png" mode=""></image>
				<text>热门课程</text>
			</view>
		</view> -->
			<view class="moreCourse">
				<view @click="articleDetail(item.content.article_content_id)" v-for="(item, index) in hotCourseList" :key="index" class="hotCourse">
					<view class="cardHeader">
						<view class="classroom"><image :src="item.image_input"></image></view>
					</view>
					<view class="watchNum">
						<view class="douyin">
							<view class="basics">{{ item.title }}</view>
							<view class="watch">
								<image src="../../static/images/eye.png"></image>
								<text>{{ item.visit }}人观看</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="over_line" v-if="isover">----- 我也是有底线的 ------</view>
			<view v-if="!hotCourseList.length" class="notAvailable">暂无课程~</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotCourseList: [],
				pagenum: 1, // 页码值
				pagesize: 10, // 每页显示多少条数据
				total: '',
				isover: false, // 判断是否到底部，给用户提示
				isloading: false, // 判断数据是否在加载中
			};
		},
		onLoad() {
			this.getHotCourse();
		},
		methods: {
			// 获取热门课程 
			getHotCourse() {
				// 正在加载下页数据
				this.isloading = true
				this.$api.getStrategy(23,{
					page: this.pagenum,
					limit: this.pagesize
				}, res => {
					this.total = res.data.count
					this.hotCourseList = [...this.hotCourseList,...res.data.list]
					// 没有在加载下页数据
					this.isloading = false;
				});
			},
			// 查看文章详情
			articleDetail(articleId) {
				this.$common.navigateTo('/pages/strategy/strategy_detail?id=' + articleId + '&id_type=1');
			}
		},
		onReachBottom() {
			if (!this.hotCourseList.length) {
				return;
			}
			// 判断当前是否正在请求数据中
			if (this.isloading) {
				return;
			}
			if (this.pagesize * this.pagenum >= this.total) {
				this.isover = true;
				return;
			}
			this.pagenum++;
			this.getHotCourse();
		}
	};
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
	}
	.courseNaver {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		margin: 20rpx 0;
		.left {
			text {
				font-weight: bold;
			}
			image {
				width: 49rpx;
				height: 46rpx;
				margin-bottom: -10rpx;
				margin-right: 10rpx;
			}
		}
		.right {
			text {
				color: #8b8c8d;
			}
			image {
				width: 15rpx;
				height: 15rpx;
				margin-bottom: 3rpx;
				margin-left: 10rpx;
			}
		}
	}
		.moreCourse {
			.over_line {
				text-align: center;
				background-color: #F5F5F5;
				// display: inline-block;
				font-size: 26rpx;
				color: #999;
				padding: 20rpx 0;
			}
			.hotCourse {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				.cardHeader {
					.classroom {
						position: relative;
						width: 328rpx;
						height: 184rpx;
						border-radius: 15rpx;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
				.watchNum {
					width: 328rpx;
					display: flex;
					padding: 20rpx 0;
					image {
						width: 27rpx;
						height: 19rpx;
						margin-right: 10rpx;
					}
					.basics {
						font-size: 30rpx;
					}
					text {
						font-size: 24rpx;
						font-weight: bold;
					}
					.douyin {
						margin-right: 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
					.huiyuan {
						flex: 1;
					}
				}
			}
		}
		.notAvailable {
			width: 100%;
			height: 150rpx;
			text-align: center;
			line-height: 200rpx;
			font-size: 24rpx;
			color: #666;
			margin-top: 200rpx;
		}
		.over_line {
			width: 100%;
			text-align: center;
			background-color: #F5F5F5;
			display: inline-block;
			font-size: 26rpx;
			color: #999;
			padding: 20rpx 0;
		}
	
</style>
